import React, { Component ,} from 'react'
import {
  Alert,
  Card,
  Comment,
  Tooltip,
  List,
  Avatar,
  message,
  Spin,
  Col,
  Row
} from 'antd'
import { UserOutlined } from '@ant-design/icons'
import TopicTag from './TopicTag'
import dayjs from 'dayjs'
import {Link}  from 'react-router-dom'
require('dayjs/locale/zh-cn')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)
// 用户话题组件
export default class TopicCard extends Component {
  render() {
    return (
      <Card title={this.props.title} type={'inner'}>
        <List
          className='topicLists'
          dataSource={this.props.data}
          renderItem={data => (
            <li>
        <Row className='rowCard'>
        <Col xs={24} md={20}>
                {/*头像跳转到user*/}
                <Avatar
                  icon={<UserOutlined />}
                  src={data.author.avatar_url}
                  size={40}
                  title={data.author.loginname}
                />
                <TopicTag
                  tab={ 'top' }
                />
                {/*文字内容跳转*/}
                <Link
                  style={{
                    color: 'black'
                  }}
                  to={`/topic/${data.id}`}
                >
                  {data.title}
                </Link>
              </Col>
              <Col xs={0} md={4}>
                {dayjs(data.last_reply_at).fromNow()}
              </Col>
        </Row>
            </li>
          )}
        />
      </Card>
    )
  }
}
